<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连续提示修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .status-panel {
            background: #e8f4fd;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
            border-left: 4px solid #2196F3;
        }
        .controls {
            margin: 20px 0;
        }
        button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #1976D2;
        }
        button.danger {
            background: #f44336;
        }
        button.danger:hover {
            background: #d32f2f;
        }
        .memory-info {
            background: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            margin: 10px 0;
        }
        .log {
            background: #000;
            color: #0f0;
            padding: 10px;
            border-radius: 5px;
            height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
        }
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔄 连续提示修复测试</h1>
        
        <div class="warning">
            <strong>⚠️ 测试说明：</strong><br>
            1. 点击"开始快速内存泄露"模拟快速内存增长<br>
            2. 当弹出确认对话框时，点击"取消"<br>
            3. 观察是否还会连续弹出对话框（应该不会）<br>
            4. 等待10秒后应该可以重新触发
        </div>

        <div class="success">
            <strong>✅ 修复内容：</strong><br>
            • 显示对话框期间停止内存检查<br>
            • 刷新过程中停止内存检查<br>
            • 用户取消后10秒冷却时间<br>
            • 防止重复显示确认对话框
        </div>
        
        <div class="status-panel">
            <h3>📊 当前状态</h3>
            <div id="status">正在加载...</div>
            <div class="memory-info" id="memoryInfo">内存信息加载中...</div>
        </div>

        <div class="controls">
            <h3>🎛️ 控制面板</h3>
            <button onclick="startFastMemoryLeak()" class="danger">开始快速内存泄露</button>
            <button onclick="stopMemoryLeak()">停止内存泄露</button>
            <button onclick="testLowThreshold()" class="danger">降低阈值测试</button>
            <button onclick="resetThreshold()">重置阈值</button>
            <button onclick="clearLog()">清空日志</button>
        </div>

        <div>
            <h3>📝 控制台日志</h3>
            <div class="log" id="logOutput"></div>
        </div>
    </div>

    <!-- 引入自动刷新脚本 -->
    <script src="auto-refresh.js"></script>
    
    <script>
        // 内存泄露测试变量
        let leakyArray = []
        let leakTimer = null
        let isLeaking = false
        let dialogCount = 0

        // 重写console.log以显示在页面上
        const originalLog = console.log
        console.log = function(...args) {
            originalLog.apply(console, args)
            const logOutput = document.getElementById('logOutput')
            const timestamp = new Date().toLocaleTimeString()
            const message = args.join(' ')
            
            // 统计对话框显示次数
            if (message.includes('显示用户确认对话框')) {
                dialogCount++
                logOutput.innerHTML += `<span style="color: #ffeb3b;">[${timestamp}] ${message} (第${dialogCount}次)</span>\n`
            } else {
                logOutput.innerHTML += `[${timestamp}] ${message}\n`
            }
            
            logOutput.scrollTop = logOutput.scrollHeight
        }

        // 更新状态显示
        function updateStatus() {
            const status = AutoRefresh.getStatus()
            const config = window.autoRefreshManager.config
            const statusDiv = document.getElementById('status')
            const memoryDiv = document.getElementById('memoryInfo')
            
            statusDiv.innerHTML = `
                <strong>监控状态:</strong> ${status.isMonitoring ? '✅ 运行中' : '❌ 已停止'}<br>
                <strong>自动刷新:</strong> ${status.enabled ? '✅ 已启用' : '❌ 已禁用'}<br>
                <strong>是否刷新中:</strong> ${status.isRefreshing ? '🔄 是' : '❌ 否'}<br>
                <strong>用户确认:</strong> ${config.askUserConfirmation ? '✅ 已启用' : '❌ 已禁用'}<br>
                <strong>检查间隔:</strong> ${config.checkInterval / 1000} 秒<br>
                <strong>内存阈值:</strong> ${(config.memoryThreshold * 100).toFixed(0)}%<br>
                <strong>对话框次数:</strong> ${dialogCount} 次
            `
            
            if (status.memoryInfo) {
                if (status.memoryInfo.usageRatio !== undefined) {
                    memoryDiv.innerHTML = `
                        <strong>内存使用:</strong> ${status.memoryInfo.usedMB} MB / ${status.memoryInfo.limitMB} MB<br>
                        <strong>使用率:</strong> ${(status.memoryInfo.usageRatio * 100).toFixed(2)}%<br>
                        <strong>总内存:</strong> ${status.memoryInfo.totalMB} MB
                    `
                } else {
                    memoryDiv.innerHTML = `
                        <strong>估算内存:</strong> ${status.memoryInfo.estimatedMemoryMB} MB<br>
                        <strong>页面元素:</strong> ${status.memoryInfo.elements} 个<br>
                        <strong>估算使用率:</strong> ${(status.memoryInfo.usageRatio * 100).toFixed(2)}%
                    `
                }
            }
        }

        // 开始快速内存泄露测试
        function startFastMemoryLeak() {
            if (isLeaking) return
            
            isLeaking = true
            dialogCount = 0
            console.log('开始快速内存泄露测试...')
            
            leakTimer = setInterval(() => {
                // 创建大量对象来快速消耗内存
                const largeObject = new Array(100000).fill('fast memory leak test data')
                leakyArray.push(largeObject)
                
                console.log(`快速内存泄露测试中... 已创建 ${leakyArray.length} 个大对象`)
                updateStatus()
            }, 500) // 每0.5秒创建一次
        }

        // 停止内存泄露测试
        function stopMemoryLeak() {
            if (!isLeaking) return
            
            isLeaking = false
            clearInterval(leakTimer)
            leakTimer = null
            leakyArray = []
            console.log('内存泄露测试已停止，内存已清理')
            updateStatus()
        }

        // 降低阈值进行测试
        function testLowThreshold() {
            AutoRefresh.updateConfig({
                memoryThreshold: 0.1 // 降低到10%
            })
            console.log('阈值已降低到10%，应该很快触发确认对话框')
            updateStatus()
        }

        // 重置阈值
        function resetThreshold() {
            AutoRefresh.updateConfig({
                memoryThreshold: 0.7 // 重置到70%
            })
            console.log('阈值已重置到70%')
            updateStatus()
        }

        // 清空日志
        function clearLog() {
            document.getElementById('logOutput').innerHTML = ''
            dialogCount = 0
            console.log('日志已清空')
        }

        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            console.log('连续提示修复测试页面已加载')
            console.log('当前配置:', window.autoRefreshManager.config)
            updateStatus()
            
            // 每秒更新状态
            setInterval(updateStatus, 1000)
        })

        // 页面卸载时清理
        window.addEventListener('beforeunload', () => {
            stopMemoryLeak()
        })
    </script>
</body>
</html>
